
button{
    background:transparent;
    outline: none !important;
    font-size: 12px;
    border:none !important;
    color:#fff;
    padding:0;margin:0;
    display: block;

}

@media (min-width: 500px) {
    html,body {
        width:500px!important;
    }
}
html,body{
    margin:0 auto;padding:0px;
    width:100%;
    height: 100%;
    background-image:url('../img/mx_3.jpeg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    position: relative;
    overflow:hidden;
}

.header{

    height:60px;
    display: flex;
    justify-content: space-between;
    align-content: center;
    align-items: center;


}
.header #playIcon{
    width:50px;
    height: 50px;
    background-image:url("../img/mui.png");
    background-size: cover;
    background-repeat: no-repeat;

}
.xuanzhuan{
    animation: playIconXuanzhuan 2s linear infinite;
}

.header .listIcon{
    width:40px;
    height: 40px;
    text-align: center;
    line-height: 40px;
    transition:all 0.5s linear;
}
.header .listIcon i{
    font-size: 40px;
    color:#fff;

}

@keyframes playIconXuanzhuan {
    0%{-webkit-transform:rotate(0deg);}
    25%{-webkit-transform:rotate(90deg);}
    50%{-webkit-transform:rotate(180deg);}
    75%{-webkit-transform:rotate(270deg);}
    100%{-webkit-transform:rotate(360deg);}

}

.yuan{

    width:200px;height: 200px;
    border-radius: 100px;
    /*background:#fff;*/
    margin:150px auto;
    /*animation:yuanqiu 8s linear infinite alternate;*/
    background: rgba(207,231,250,0.5);
    background: radial-gradient(ellipse  at left bottom,  rgba(207,231,250,1) 0%,rgba(0,98,156,0) 100%);
    box-shadow:12px 10px 20px rgba(255,255,255,0.5) inset;
    transform:scale(0.7);
}


@keyframes yuanqiu{


    0%{
        transform:scale(0.7);
        background: radial-gradient(circle at  70% 70%,  rgba(207,231,250,.8) 0%,rgba(0,98,156,1) 100%);
    }
    20%{
        transform:scale(0.8);
        background: radial-gradient(circle at 70% 70%,  rgba(207,231,250,.8) 0%,rgba(0,98,156,.2) 100%);
    }
    40%{
        transform:scale(0.9);
        background: radial-gradient(circle at 70%  70%,  rgba(207,231,250,.8) 0%,rgba(0,88,156,.4) 100%);
    }
    60%{
        transform:scale(1);
        background: radial-gradient(circle at 70% 70%,  rgba(207,231,250,.8) 0%,rgba(0,78,156,.6) 100%);
    }
    80%{
        transform:scale(1.1);
        background: radial-gradient(circle at 70% 70%,  rgba(207,231,250,.8) 0%,rgba(0,68,156,.8) 100%);
    }
    100%{
        transform:scale(1.2);
        background: radial-gradient(circle at 70% 70%,  rgba(207,231,250,.8) 0%,rgba(0,58,156,1) 100%);
    }





}


.list-box{
    position:absolute;
    top:100%;
    left:0px;

    background-color:transparent;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    transition:all 1s ease-in-out;
    overflow:hidden;
    z-index: 10;

}
.list-box .liat-box-i{
    max-height: 400px;
    overflow:auto;
    /*border-top-right-radius: 20px;*/
    /*border-top-left-radius: 20px;*/
    border:1px solid lavender;
    box-shadow: 1px 1px 15px lavender inset;
    background-color: #0075A9;

}
.list-box ul{
    padding:0;margin:0;
    list-style: none;

}
.list-box ul li{
    color:#fff;
    height: 60px;
    line-height: 60px;
    text-align: center;
     width:100%;
    position: relative;
}

.list-box ul li button{
    width:100%;
    font-size:16px;

}

.list-box ul li button:hover ~ .anim{
    animation:btn_anm_1 0.3s linear normal;
}

.list-box ul li .anim{
    position:absolute;
    width:inherit;height:inherit;
    top:0;left:0;
    background-color: rgba(255,255,255,0.4);
    display: block;
    transform:scaleX(0);
    transform-origin: center;
    opacity: 0;

}

.list-box ul li .anim_play{
    position:absolute;
    width:30px;height:20px;
    top:20px;right:0;
    /*background-color:rgba(255,255,255,0.6);*/
    display: flex;
    justify-content: space-around;

}
.list-box ul li .anim_play span{
    width:4px;height: inherit;
    background-color:#fff;
    transform:scale(0);

}

.list-box .title-box{
    height: 60px;
    background-color:transparent;
    border-top-right-radius: 20px;
    border-top-left-radius: 20px;
    border: 1px solid lavender;
    border-bottom:none;
    box-shadow: 1px 1px 15px lavender inset;
    display: flex;
    justify-content:space-between;
    align-items: center;
    background-color: #0075A9;
}
.title-box .title-text{
    height: inherit;
    line-height: 60px;
    color:#fff;
}

.title-box .playstate{
    width:40px;height: 40px;
}
.danquxuanhuanIcon{
    background:url("../img/danquplay.png") center no-repeat;
}
.xuanhuanIcon{
    background:url("../img/xuanhuanplay.png") center no-repeat;
}

/**
暂停播放时动态列表的ICON
 */
.activePlay_p span{
    transform:scale(1) !important;
    animation:none !important;
}
/**
播放的动态列表ICON
 */
.activePlay span:nth-of-type(1){

    animation:play_anim 1s infinite linear alternate;

}

.activePlay span:nth-of-type(2){

    animation:play_anim 1s infinite linear alternate 0.3s;

}

.activePlay span:nth-of-type(3){

    animation:play_anim 1s infinite linear alternate 0.5s;

}

.activePlay span:nth-of-type(4){

    animation:play_anim 1s infinite linear alternate 0.3s;

}

.activePlay span:nth-of-type(5){

    animation:play_anim 1s infinite linear alternate;

}



#listCheck:checked ~ .header .listIcon{
    transform:rotate(90deg);

}

#listCheck:checked ~ .list-box{
    transform:translateY(-100%);

}


[x-cloak] {
    display: none !important;
}

@keyframes btn_anm_1 {
    form{
        transform:scaleX(0);
        opacity: 0;
    }
    to{
        transform:scaleX(1);
        opacity: 1;
    }
}

@keyframes play_anim {
    form{

       transform:scaleY(0);

    }
    to{
       transform:scaleY(1);
    }
}


.mx_text{
    height: 60px;
    background-color: rgba(255,255,255,0.8);
    line-height: 60px;
    font-size: 23px;
    text-align: center;
    font-weight: 700;
    color: #fff;
    transition:all 1s ease-in-outyuan;
}

.huxi_text{

    font-size:20px;
    font-weight: bolder;
    color:#fff;
    height: 200px;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;

}
.cishu{
    color:#fff;
    font-size:13px;
}
.setting{
    width:40px;height:40px;
    float:right;
    margin-top:10px;
    background-image:url('../img/setting.png');
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}
.settingFocus{
    box-shadow: -1px 1px 5px rgba(0,0,0,0.5);
}


.layui-layer-demo{

    background: #002C83 !important;
    width: 300px;
    min-height: 200px;
    border: 1px solid rgba(255,255,255,0.9);
    box-shadow: 2px 2px 15px rgb(255 255 255 / 80%) inset !important;
    color: #fff;
    position:absolute;
    top:40%;
    transform:translateX(-50%);
    left:50%;
    padding:10px;
    transition:all .5s ease-in-out;

}

.layui-layer-demo .layui-layer-title{
    color:#fff !important;
    box-shadow: 0px -1px 3px rgb(255 255 255 / 80%) inset !important;
}

.jishuqi{
    display: flex;
}
.jishuqi div,.jishuqi input{
    font-size:15px;
    font-weight: bolder;
    text-align: center;
    background-color:transparent;
    border:1px solid rgba(255,255,255,0.8);
    transition:all 0.5s ease-in-out;
    color:#fff;
}
.jishuqi input:focus{

    outline: none;
    box-shadow: 1px 1px 5px rgba(255,255,255,0.6) inset;

}
.jishuqi input{
    flex-grow:1;
    display: block;
}

.jishuqi .jia{
    flex-grow:9;
}
.jishuqi .jian{
    flex-grow:9;
}

.layui-layer-demo textarea{
    width:100%;
    height: 140px;
    background-color:transparent;
    border:1px solid #fff;
    color:#fff;
    transition:all .8s ease-in-out;
}
.layui-layer-demo textarea:focus{
    outline:none!important;
    box-shadow: 1px 1px 5px rgba(255,255,255,0.6) inset;

}
